<template>
  <div class="login-containerWrap">
    <div class="login-container">
      <!-- 表单理解
        ref="Form"          Form相当于 id，可以确定表单，使用其身上的方法，如$refs[form].validate(验证表单的方法)
        :model="ruleForm"   模型需要验证，表单数据对象,ruleForm对象里面写input的v-model数据； 
        :rules="rules"      验证规则,配合prop=""
        status-icon         验证判断图标
        element框架         不支持原生的v-model修饰符 
        status-icon   
        clearable
         -->
      <el-form
        ref="regForm"
        :rules="rules"
        label-width="60px"
        class="login-form"
        :model="regForm"
        status-icon
      >
        <h2 class="reg-title">xx会员管理系统-注册</h2>
        <el-form-item label="账号" style="width:320px" prop="username">
          <el-input
            placeholder="请输入帐号"
            v-model="regForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" style="width:320px" prop="password">
          <el-input
            type="password"
            placeholder="请输入密码"
            v-model="regForm.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item style="margin:0">
          <el-button type="primary" @click="$router.push('/login')"
            >登录</el-button
          >
          <el-button
            type="primary"
            @click="goReg('regForm')"
            style="margin-left:120px"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import userApi from "@/api/userApi.js";
export default {
  name: "Reg",
  data() {
    let checkNameRule = (rule, value, callback) => {
      let val = /^[0-9a-zA-Z_]{6,18}$/.test(value);
      if (!val) {
        callback(new Error("请输入6~18位数字或字母"));
      } else {
        // 正则通过了，发送请求验证用户名
        userApi
          .checkName(value)
          .then(res => {
            if (res.data.code) {
              // 允许注册
              callback();
            } else {
              // 不允许注册
              callback(new Error(res.data.message));
            }
          })
          .catch(err => {
            console.log("出错了", err);
          });
      }
    };
    let passwordRule = (rule, value, callback) => {
      let firstVal = /^[a-zA-Z_]/.test(value);
      let val = /^[0-9a-zA-Z_]{6,16}$/.test(value);
      if (!firstVal) {
        callback(new Error("密码必须以字母开头"));
      } else if (value.length < 6) {
        callback(new Error("密码设置太简单了，请输入6~18位数字或字母。"));
      } else if (value.length > 17) {
        callback(new Error("密码的位数太多了，请输入6~18位数字或字母"));
      } else {
        callback();
      }
    };
    return {
      regForm: {
        username: "",
        password: ""
      },

      // 表单验证
      rules: {
        username: [{ validator: checkNameRule, trigger: "change" }],
        password: [{ validator: passwordRule, trigger: "change" }]
      }
    };
  },
  methods: {
    // 表单提交，this.$refs[formName].validate(是否校验成功,未通过校验的字段)  其中formName，在ref="Form"，就是Form
    goReg(formName) {
      this.$refs[formName].validate(valid => {
        // 判断是否通过表单验证
        if (valid) {
          // 对密码进行md5加密
          let encryptPassword = this.$md5(this.regForm.password);
          // 检验通过发送请求
          userApi
            .reg(this.regForm.username, encryptPassword)
            .then(res => {
              // console.log(res);
              // 消息提示
              this.$message({
                showClose: true,
                message: res.data.message,
                type: "success",
                duration: 2000
              });
              // 跳转
              this.$router.push({
                path: "/login",
                query: { username: this.regForm.username }
              });
              // 清空表单数据
              // this.$refs["regForm"].resetFields();
            })
            .catch(err => {
              console.log("出错了", err);
            });
        } else {
          console.log("表单校验没有正确");
        }
      });
    }
  },

  components: {}
};
</script>

<style scoped lang='scss'>
.login-container {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("/img/background.jpg") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  display: flex;
  .login-form {
    width: 350px;
    margin: auto;
    background-color: rgb(255, 255, 255, 0.3);
    padding: 30px;
    border-radius: 20px;
    .reg-title {
      text-align: center;
      padding-bottom: 20px;
      color: #303133;
    }
  }
}
</style>